const baseUrl = 'http://api-breakingnews-web.itheima.net' // 根路径

// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

// 给添加按钮注册点击事件
$('.add').on('click', e => {
  e.preventDefault()
  let index = layer.open({
    type: 1,
    title: "新增分类",
    area: ['500px', '300px'],
    content: add_str, //这里content是一个普通的String
    success(res) {
      console.log('当前弹出层成功了~~');
      // 给表单注册提交事件 => 添加功能
      $('.add-form').on('submit', e => {
        e.preventDefault()
        // 看接口文档 => 需要什么=> 传什么
        const data = $('.add-form').serialize()
        axios.post(`${baseUrl}/my/article/addcates`, data, {
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          console.log(res);
          if (res.data.status === 0) {
            layer.close(index)
            // 重新渲染页面
            load()
          }
        })
      })
    }
  });
  // 在合适的时机 
})
// 删除操作 => 利用事件委托
$('tbody').on('click', '.delete', e => {
  // 后台要什么数据 ? 
  // /my/article/deletecate/:id 动态的id
  // :id 指代的就是一个动态的id
  // 获取id
  // const id = $(this).attr('myid')
  const id = e.target.getAttribute('myid')
  console.log(e.target.getAttribute('myid')); // dom元素
  axios.get(`${baseUrl}/my/article/deletecate/${id}`, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(res => {
    if (res.data.status === 0) {
      // load()  // 重新渲染
      // 让当前这一条删除掉
      $(e.target).parents('tr').remove()  // 删除掉自身 (自爆)
      // empty() // 删除所有的子元素
    }
  })
})

// 编辑操作
$('tbody').on('click', '.edit', function (e) {
  // 获取当前编辑按钮身上的自定义属性 name  alias
  const name = $(this).attr('data-name')
  const alias = $(this).attr('data-alias')
  const Id = $(this).attr('myid')
  console.log(name, alias);
  // 显示弹窗
  e.preventDefault()
  let index = layer.open({
    type: 1,
    title: "编辑分类",
    area: ['500px', '300px'],
    content: edit_str, //这里content是一个普通的String
    success(res) {
      // 赋值操作
      // $('input[name=name]').val(name)
      // $('input[name=alias]').val(alias)

      // 借助表单的快速赋值
      form.val('edit', { // lay-filter对应的值
        name, alias, Id
      })

      // 给表单注册submit 事件
      // 发送请求
      $('.add-form').on('submit', e => {
        const data = $('.add-form').serialize()
        e.preventDefault()
        axios.post(`${baseUrl}/my/article/updatecate`, data, {
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          // 1.关掉弹窗
          // 2.重新渲染
          if(res.data.status === 0){
            layer.close(index)
            load()  // 重新渲染
          }
        })
      })
    }
  });
})

// 渲染功能
// 1.发送请求
// 2.找到对应的容器 => 渲染
function load() {
  axios.get(`${baseUrl}/my/article/cates`, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(res => {
    console.log(res);
    // 先清空在渲染
    $('tbody').empty()
    const { data } = res.data
    data.forEach(obj => {
      let theTr = $(`<tr>
              <td>${obj.name}</td>
              <td>${obj.alias}</td>
              <td>
                <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
              </td>
            </tr>`)
      $('tbody').append(theTr)
    });
  })
}
load()


// const form = layui.form;
// form.verify({
//   ctname: [
//     /^[\u4E00-\u9FA5]+$/,
//     "分类名只能是中文"
//   ],
//   aliname: [
//     /^[a-z0-9]+$/,
//     "小写英文和数字组成"
//   ]
// })

// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

